<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="list one">
        <li id="first1">01</li>
        <li>02</li>
        <li class="mid">03</li>
        <li class="mid">04</li>
        <li>05</li>
        <li name="last">06</li>
    </ul>
    <ul class="list two">
        <li id="first2">01</li>
        <li>02</li>
        <li class="mid">03</li>
        <li class="mid">04</li>
        <li>05</li>
        <li name="last">06</li>
    </ul>
</body>
<script>
    // 通过文档对应id名 class名 标签名 name属性查找页面中所有元素
    // document.getElementById() 获取特定 ID 元素的节点
    // document.getElementsByTagName() 获取相同元素的节点列表返回数组，使用[0]来获取
    // document.getElementsByName() 获取相同名称的节点列表	不是所有标签都有name属性  某些低版本浏览器会有兼容性问题
    // document.getElementsByClassName()  获取相同class属性的节点列表  ( IE8及以下不支持)

    // var last = document.getElementsByName("last")[0];
    // console.log(last);

    // var liList = document.getElementsByTagName("li");
    // console.log(liList);

    // var midList = document.getElementsByClassName("mid");
    // console.log(midList);

    // 通过父元素查找子代元素(定查询范围)
    // 注意:通过父元素查找子代元素 只能使用 parent.getElementsByClassName() parent.getElementsByTagName(),不能使用id和name查找(没有相关的方法 => 只能通过文档查找)

    // 查找one中的li和.mid
    var one = document.getElementsByClassName("one")[0];
    console.log(one);

    // 查找one中的li
    var liList = one.getElementsByTagName("li");
    console.log(liList);

    // 查找one中的.mid
    var midList = one.getElementsByClassName("mid");
    console.log(midList);

    // one.getElementById is not a function   => 不是一个函数 => 没有此方法
    // one.getElementById("first1");  //


    // console.log(one.getElementsByClassName);
    // console.log(one.getElementsByTagName);
    // console.log(one.getElementById);
    // console.log(one.getElementsByName);


</script>

</html>